<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <span class="filter-title filter-item">消费时间</span>
      <k-date-picker v-model="timeValue" class="filter-item" @hqchang="handleFilter" /> -->
      <span class="filter-title filter-item">公司名称</span>
      <k-select
        v-model="listQuery.companyId"
        class="filter-item right-item"
        style="width:120px"
        :select-params="boxList"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">消费时间</span>
      <k-date-picker v-model="timeValue" class="filter-item" @hqchang="handleFilter" />
      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="进行搜索"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>
    <div style="margin-top: 40px;" />
    <!--表格相关 -->
    <el-table
      ref="multipleTable"
      :data="listData"
      fit
      border
      highlight-current-row
      style="width: 100%; border-radius: 8px"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column prop="companyName" min-width="150px" label="公司名称" align="center" />
      <el-table-column prop="anchorNames" min-width="450px" label="下属主播" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.anchorNames }}
        </template>
      </el-table-column>
      <el-table-column prop="rechargePrice" min-width="100px" label="消费金额(R)" align="center" />
      <el-table-column prop="drawPrice" min-width="100px" label="提取金额(R)" align="center" />
      <el-table-column prop="premiumPrice" min-width="100px" label="支付手续费(R)" align="center" />
      <el-table-column prop="finalPrice" min-width="100px" label="结算金额(R)" align="center" />
      <el-table-column prop="date" min-width="150px" label="时间" align="center" />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="getListData"
    />
  </div>
</template>

<script>
import { getAllCompany } from '@/api/company/index.js'
import Pagination from '@/components/Pagination'
import { anchorlistData } from '@/api/user/user'
export default {
  name: 'Company',
  components: { Pagination },
  data() {
    return {
      listQuery: {
        companyId: undefined,
        pager: {
          pageNo: 1,
          pageSize: 10
        },
        startTime: '',
        endTime: '',
        key: ''
      },
      listData: [],
      totalRows: 0,
      timeValue: '',
      boxList: [],
      totalData: {}
    }
  },
  watch: {
    // 时间赋值
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    }
  },

  created() {
    this.getListData()
    this.code_boos()
  },

  methods: {
    code_boos() {
      getAllCompany(this.listQuery).then((res) => {

        (res.data|| []).map((res, index) => {
          this.boxList.push({ 'label': res.name, 'value': res.id })
        })
      })
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.listData.length === rowIndex + 1) {
        return {
          rowspan: 1,		// 2：需要合并的行数
          colspan: 5		// 1：需要合并的列数
        }
      }
    },

    // list数据
    getListData() {
      anchorlistData(this.listQuery).then(res => {
        const data = res.data
        this.totalRows = data.totalRows
        this.listData = data.rows
        this.totalData = res.data.totalData
        if(this.totalData)this.tableDate(data)
      })
    },
    tableDate(data) {
      this.$nextTick(() => {
        const html7 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[2]
        html7.innerHTML = this.totalData.rechargePrice

        const html9 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[3]
        // html9.innerHTML = `${data.totalData.drawPrice} <a  style="text-decoration: underline;color: blue"></a>`
        html9.innerHTML = this.totalData.drawPrice


        const html11 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[4]
        // html11.innerHTML = `${data.totalData.profit} <a  style="text-decoration: underline;color: blue"></a>`
        html11.innerHTML = this.totalData.premiumPrice

        const html13 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[5]
        // html13.innerHTML = `${data.totalData.finalPrice} <a  style="text-decoration: underline;color: blue"></a>`
        html13.innerHTML = this.totalData.finalPrice
      })
    },
    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.getListData()
    }
  }
}
</script>

<style lang="scss" scoped>
$menuText: #14162E; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .right-item {
    margin-right: 10px;
  }

  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .user-status,
  .account-status {
    margin-right: 20px;
  }
}

.top-right-btn-container {
  position: relative;

  .top-btn {
    margin: 30px 20px 30px 0px;
    font-size: 14px;
    color: #ffffff;
  }

  .top-right-btn {
    position: absolute;
    right: 20px;
    top: 30px;
    background-color: #F8F7FB;
    border-color: $mainColor;
    color: #14162E;

    &:hover {
      color: #ffffff;
      background-color: $mainColor;
    }

    &:active {
      color: #14162E;
    }

  }

  .top-right-btn-left {
    position: absolute;
    right: 140px;
    top: 30px;
    background-color: #F8F7FB;
    border-color: $mainColor;
    color: #14162E;

    &:hover {
      color: #ffffff;
      background-color: $mainColor;
    }

    &:active {
      color: #14162E;
    }

  }
}

.cell {
  i {
    color: #3b425d;
    margin-left: 8px;
    font-size: 18px;
  }
}

.warning_div {
  padding: 50px 120px;

  span {
    font-size: 18px;
  }

  ::v-deep .el-input {
    width: 280px;
    margin: 0 6px;
  }

  ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #3b425d;
  }

  ::v-deep .el-select .el-input__inner:focus {
    border-color: #3b425d;
  }
}

.give_div {
  margin: 0 auto;
  width: 800px;
  height: 400px;
  padding: 0 50px 50px;
  box-sizing: border-box;

  ::v-deep .el-input {
    width: 100%;
  }
}

::v-deep .edit-cell {
  .input-div {
    .el-input__inner {
      height: 50px;
    }
  }
}
</style>

